<template>
  <!--   :style="{ width: width, height: height }" -->
  <div ref="chart" class="chart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "pieCahrt",
  // props: {
  //   width: {
  //     type: String,
  //     default: "400px",
  //   },
  //   height: {
  //     type: String,
  //     default: "200px",
  //   },
  // },
  props: {
    pieChartData: {
      type: Array,
      default: () => {},
    },
  },
  watch: {
    pieChartData(n) {
      this.$nextTick(() => {
        this.initChart(n);
      });
    },
  },
  methods: {
    initChart(data) {
      let myChart = echarts.init(this.$refs.chart);
      var option = {
        title: {
          text: "数据来源",
          left: 10,
          top: 10,
          textStyle: {
            color: "#2ED97A",
            fontSize: 14,
            fontWeight: 400,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          show: true,
          right: 20,
          top: "center",
          itemGap: 14,
          orient: "vertical",
          icon: "circle",
          textStyle: {
            color: "#BAFFE5",
          },
        },
        color: ["#039780", "#1A9AD8", "#EDBF00", "#EA8B00"],
        series: [
          {
            name: "数量",
            type: "pie",
            center: ["40%", "60%"],
            selectedMode: "single",
            radius: "60%",
            label: {
              show: false,
              // position: "inner",
              // fontSize: 14,
            },
            // data: [
            //   { value: data.fblXqd, name: "分辨率" },
            //   { value: data.cgqXqd, name: "传感器" },
            //   { value: data.qyXqd, name: "区域" },
            //   { value: data.wxptXqd, name: "卫星" },
            // ],
            data,
          },
        ],
      };
      myChart.setOption(option);
      // 屏幕大小改变 图大小适应
      window.onresize = myChart.resize;
    },
  },
};
</script>

<style lang="scss" scoped>
.chart {
  width: 400px;
  height: 260px;
  background-image: url("../assets/image/矩形 6.png");
  background-size: 100% 100%;
}
</style>
